<%@ page contentType="text/html;charset=utf-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <title>预约中心</title>
  <link rel="stylesheet" href="<c:url value='/resource/wechat/css/frozen.css'></c:url>">
  <link rel="stylesheet" href="<c:url value='/resource/wechat/css/main.css'></c:url>">
</head>

<body class="body_bg" ontouchstart>
<section class="ui-container">
  <div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
    <label for="#" class="h1_text" style="width: 80%;color: #2775fb; font-size: 16px; ">${matname}</label>
  </div>

  <%--<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">--%>
    <%--<label for="#">姓<span class="text_white">姓名</span>名：</label>--%>
    <%--<input type="text" placeholder="">--%>
  <%--</div>--%>
  <%--<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">--%>
    <%--<label for="#">身份证号：</label>--%>
    <%--<input type="text" placeholder="">--%>
  <%--</div>--%>
  <%--<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">--%>
    <%--<label for="#">手机号码：</label>--%>
    <%--<input type="text" placeholder="">--%>
  <%--</div>--%>
  <%--<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">--%>
    <%--<label for="#">联系地址：</label>--%>
    <%--<input type="text" placeholder="">--%>
  <%--</div>--%>
  <div class="ui-form-item ui-form-item-show ui-border-tb bg_fff" style="margin-top: 10px;">
    <span style="color: grey">请选择区域:</span>

    <select onchange="todept(this)"style="border: none">
      <option>请选择</option>
    <c:forEach items="${region.data}" var="reg">
      <option value="${reg.guid}">  ${reg.regionname}</option>
    </c:forEach>
    </select>

  </div>
  <div class="ui-form-item ui-form-item-show ui-border-tb bg_fff" style="margin-top: 10px;">
      <span style="color: grey">请选择部门:</span>
    <select id="deptD" onchange="today(this.value)" style="border: none">
      <option>请选择</option>
        <c:if test="${dept.totalPage==0}">
            <option>无相关部门</option>
        </c:if>
        <c:if test="${dept.totalPage!=0}">
            <c:forEach items="${dept.list}" var="reg">
                <option value="${reg.GUID}"> ${reg.DEPT_NAME}</option>
            </c:forEach>
        </c:if>
    </select>

  </div>
  <div class="ui-form-item ui-form-item-show ui-border-tb bg_fff" style="margin-top: 10px;">
    <label for="#" class="h1_text" style="width: 80%;color: #2775fb; font-size: 16px; ">请选择一个预约日期</label>
  </div>
  <div class="bg_fff ui-border-b" style="overflow: hidden;">
    <ul class="order_time" id="ula">

      <li>暂无预约日期</li>

      <%--<li class="hov"></li>--%>
    </ul>
  </div>
  <div class="ui-form-item ui-form-item-show ui-border-tb bg_fff" style="margin-top: 10px;">
    <label for="#" class="h1_text" style="width: 80%;color: #2775fb; font-size: 16px; ">请选择一个时间段</label>
  </div>
  <div class="bg_fff ui-border-b" style="overflow: hidden;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="order_table" id="tabletime">


      <%--<tr>--%>
        <%--<td>选择</td>--%>
        <%--<td>时间段</td>--%>
        <%--<td>剩余名额</td>--%>
      <%--</tr>--%>
      <tr>
        <td colspan="3">暂无预约时间</td>
      </tr>

    </table>
  </div>
  <div class="ui-btn-wrap">
    <button class="ui-btn-lg ui-btn-primary" onclick="sub()">
      在线预约
    </button>
  </div>

  </form>

</section>
<input type="hidden"value="" id="hid"/>
</body>
<script src="<c:url value='/resource/js/jquery-2.0.min.js'/>"></script>
<script type="text/javascript">
  var matid= "${matid}";
  var matname= "${matname}";
  function todept(a) {
      var qxid = a.value;
      var html="";
      //选择区域刷新部门
      $.ajax({
          data: {"qxid": qxid, "matid": matid},
          url:"<c:url value="/api/police/getdepts"/>",
          type: "get",
          dataType: "json",
          success: function (data) {
            if(data.data.totalPage!=0){
                var list= data.data.list;
            for(var i=0;i<list.length;i++){
                html+="<option value="+list[i].GUID+"> "+list[i].DEPT_NAME+"</option>";
            }
                today(list[0].GUID);

            }else{
          html+="<option>无相关部门</option>";
            }
              $("#deptD").html(html);
          }
      });
  }
  function today(deptid){
      //刷新部门同时记载预约日期
      var li=" ";
      $.ajax({
          url: "<c:url value="/api/police/getOrderTime"/>",
          type:"post",
          dataType:"json",
          data:{"deptid":deptid,"matid":matid},
          success:function (data) {
              var timelist = data.data;
              //console.log(timelist[0].times[0]);
              if (timelist!= "0") {
                  for (var i = 0; i < timelist.length; i++) {
                      li += "<li onclick='clitime("+i+")' id='li"+i+"' name="+timelist[i].dayid+">"+timelist[i].day+"</li>";
                      li+="<input id=lii"+i+" type='hidden' value='"+JSON.stringify(timelist[i])+"'/>"
                  }
                  $(".order_time").html(li);
                  totime(timelist[0].times);


              } else {
                  li += "<li>暂无预约日期</li>";
                  $(".order_time").html(li);
                  totime(0);
              }

          },error:function () {
              console.log("加载预约时间错误");
          }


      });

  }
//  $(function() {
//    $(".order_time li").click(function() {
//      $(this).addClass("hov").siblings().removeClass("hov");
//
//    })
//  })

  function totime(times){
      var ht="";
      if(times==0){
          ht+=" <tr> <td colspan='3'>暂无预约时间</td> </tr>";
      }else{
          ht+='<tr><td>选择</td><td>时间段</td><td>剩余名额</td></tr>';
      for(var i=0;i<times.length;i++){
          ht+='<tr><td><input type="radio" name="radio" id="radio">  <label for="radio"></label>   </td> <td>'+times[i].start+"-"+times[i].end+'</td> <td> <div class="ui-badge">'+(times[i].totalcount-times[i].yycount)+'</div> </td> </tr>';
      }




      }

      $("#tabletime").html(ht);
  }

      function clitime(a){
          $("#ula").children().removeClass("hov");
          $("#li"+a).addClass("hov");
          $("#hid").val("#li"+a);
          totime(jQuery.parseJSON($("#lii"+a).val()).times);
      }
  function sub() {
          if(  $("input[name='radio']:checked").length==0){
              alert("日期未选择，无法预约")
              return false;
          }
      var id = $("#hid").val();
      var orderday = $(id).html();
      var timeid = $(id).attr("name");
      var start = $("input[name='radio']:checked").parent().next().html().split("-")[0];
      var end = $("input[name='radio']:checked").parent().next().html().split("-")[1];
      var guid = "${guid}";
      var data = {
          "deptid": $("#deptD").val(),
          "deptname": $("#deptD").text(),
          "matid": matid,
          "matname": matname,
          "timeid": timeid,
          "orderday": orderday,
          "start": start,
          "end": end,
          "creator": guid,
      };
      $.ajax({
          url: '<c:url value="/api/police/orderinfo"/>',
          dataType: 'json',
          type: "post",
          data:data,
          success: function (data) {
              if (data.succ) {
                  alert("预约成功");
              }else {
                  alert(data.res);
              }
          }, error: function () {
              alert("预约失败");
          }
      });

  }
</script>

</html>